<template>
	<div class="action-box"
	     :class="{ 'action-box-hidden':!hasActionShow}">
		<span v-show="actionShow(action)"
		      v-for="action in actionList">
			<component :ref="action.code"
			           :key="action.code"
			           :modalTransfer="modalTransfer"
			           :is="getActionComp(action.type)"
			           :model="action"></component>
		</span>
	</div>
</template>

<script>
import actionLib from 'action/lib';
import actionBase from 'action/lib/actionBase';
import $ from '@/common';
export default {
	name: 'actionPanel',
	props: {
		model: {},
		selectStatus: {
			default: false,
		},
		//模态窗转化位置
		modalTransfer: {
			defualt: true,
		},
	},
	data() {
		return {
			defaultAction: {
				add: true,
				delete: true,
				view: true,
				edit: true,
				search: true,
			},
			hasActionShow: false,
		};
	},
	computed: {
		actionList() {
			return (
				this.model &&
				this.model.filter(action => {
					action.type && (action.type = $.toCamelCase(action.type, '_'));
					return action.locate !== 'none' && (!action.dev || $.dev);
				})
			);
		},
	},
	methods: {
		getActionComp(actionType) {
			if (actionLib[actionType]) {
				return 'action_' + actionType;
			} else {
				return 'actionBase';
			}
		},
		actionShow(action) {
			var v = action.locate !== 'hidden' && action.locate !== 'right';
			if (v && action.locate !== 'inline' && action.locate !== 'none') {
				this.hasActionShow = true;
			}
			return v;
		},
		actionTrigger({ code, data, row, index, cb, option }) {
			if (this.$refs[code] && this.$refs[code][0]) {
				return this.$refs[code][0].actionTrigger(data, row, index, cb, option);
			}
		},
		getAction(code) {
			if (this.$refs[code]) {
				return this.$refs[code][0] || this.$refs[code];
			}
		},
	},
	created() {
		this.$parent.$actionCollection = this;
		if (this.model && this.model.length) {
			this.model.forEach(action => {
				if (!action.type && this.defaultAction[action.code]) {
					action.type = action.code;
				}
				let type = $.toCamelCase(action.type, '_');

				if (actionLib[type]) {
					let typeCode = type;

					if (actionLib[type].base) {
						typeCode = actionLib[type].base;
					}
					this.$options.components['action_' + type] = resolve =>
						require.ensure([], require => {
							resolve(require('action/lib/' + typeCode + '/index'));
						});
				}
			});
		}
	},
	mounted() {},
	components: {
		actionBase,
	},
};
</script>

<style lang="less">
.action-box {
	padding: 0 0 10px;
	float: left;
	position: relative;
	z-index: 4;
	.action {
		display: inline-block;
		margin-right: 5px;
	}
}
.action-box-hidden {
	display: none;
}
</style>
